import Component from 'utils/js/jquery-component';
import createClass from 'utils/js/create-class';
import s from './index.css';
import { apiRoot } from 'utils/js/config';
import layer from 'utils/js/layer-mobile';
import wordsToEmoji from 'utils/js/wordsToEmoji';

export default createClass(Component, {
  __name__: 'Loading',
  locals: s,

  __init__: function (el) {
    this.$box = this.$(this.rh('<div class="box"></div>'));
    this.box = this.$box[0];
    this.$box.appendTo(el);
    this.status = 0; // 0: 就绪 1: 数据获取中 2: 没有数据了 3: 暂无数据
    this.statusClassNames = [s.ready, s.loading, s.nomore, s.empty];
    this.pageSize = 10; // 每次加载的数量
    this.page = 1; // 请求第几页的聊天数据
    this.lock = false; // 是否锁住滚动加载
    // this.init();

    // 保存this
    var me = this;

    // 点击删除消息
    this.$box.on('click', '.btn-del', function () {
      var mid = this.dataset.mid;
      // todo: 通知后台删除该id的消息
      me.remove(mid);
    })
  },

  // 获取一条消息的内容的HTML字符串
  getMsgHTML: function (d) {
    var msgWords = wordsToEmoji(d.words);
    var msgImgs = d.imgs.map(function (src) {
      if (src.match(/\.(webm|mp4|ogg|mov)$/i)) { // 如果是视频
        return `<span class="video"><img src="${src}"></span>`;
      } else { // 如果是图片
        return `<span><img src="${src}"></span>`;
      }
    }).join('');

    return `
      <div class="body">
        ${msgWords && `<div class="words">${msgWords}</div>`}
        ${msgImgs && `<div class="imgs">${msgImgs}</div>`}
      </div>
      <div class="foot">
        <span class="line">|</span>
        <span class="btn-del" data-mid="${d.id}">删除</span>
      </div>`.replace(/\s*\n\s*/g, '');
  },

  // 获取一条消息的HTML字符串
  getItemHTML: function (d) {
    var time = `<div class="time">${d.time}</div>`;
    var sexClass = ['', 'man', 'woman'][d.sex];
    var avatar = d.avatar || require('asset/test.jpg');

    return `
      <div class="item" id="msg-${d.id}">
        ${time}
        <div class="flex">
          <div class="left">
            <div class="avatar">
              <img src="${avatar}">
            </div>
          </div>
          <div class="right">
            <div class="head">
              <span class="nick">${d.nick}</span>
              <span class="sex ${sexClass}"></span>
            </div>
            ${this.getMsgHTML(d)}
          </div>
        </div>
      </div>`.replace(/\s*\n\s*/g, '');
  },

  // 添加一条消息
  add: function (msg) {
    var itemHTML = this.getItemHTML(msg);
    this.$box.append(this.rh(itemHTML));
    if (true) { // 如果是自己发的消息
      this.slideToBottom();
    } else {
      if (this.box.scrollHeight - this.$box.height() - this.box.scrollTop < 375) {
        this.slideToBottom();
      }
    }
  },

  // 在前面面插入一批消息
  prepend: function (data) {
    var me = this;
    this.lock = true;
    this.$box.css('overflow', 'hidden');
    setTimeout(function () {
      var scrollTop = me.box.scrollTop; // 保存当前的scrollTop
      var scrollHeight = me.box.scrollHeight; // 保存当前的scrollHeight
      me.$box.prepend(data.map(function (d) {
        return me.rh(me.getItemHTML(d));
      }).join(''));
      me.box.scrollTop = (me.box.scrollHeight - scrollHeight + scrollTop); // 回滚到原来的位置
      setTimeout(function () {
        me.$box.css('overflow', '');
        me.lock = false;
      }, 20);
    }, 20);
  },

  // 滚到底部
  scrollToBottom: function () {
    this.box.scrollTop = this.box.scrollHeight;
  },
  // 滑到底部
  slideToBottom: function () {
    this.$box.animate({ scrollTop: this.box.scrollHeight }, 1000);
  },

  // 根据消息id删除一条消息
  remove: function (mid) {
    var me = this;
    me.lock = true;
    var $item = me.$box.find("#msg-" + mid);
    if ($item.length) {
      $item.slideUp(function () {
        this.remove();
        me.lock = false;
      });
    }
  },
});


// export default createClass(Component, {
//   // 设置聊天数据的获取状态
//   setStatus: function (n) {
//     this.$box.removeClass(this.classNames[this.status]);
//     this.status = n;
//     this.$box.addClass(this.classNames[this.status]);
//   },

//   // 获取聊天数据
//   getData: function (cb) {
//     if (this.status) return;
//     var me = this;
//     me.setStatus(1);
//     me.$.ajax({
//       method: 'GET',
//       url: apiRoot + '',
//       data: {
//         page: me.page,
//         pageSize: me.pageSize,
//       },
//       timeout: 10000,
//     }).done(function (d) {
//       me.page++;
//       cb(d);
//       me.setStatus(d.length < me.pageSize ? 2 : 0);
//     }).fail(function () {
//       layer.msg('网络太慢啦');
//       me.setStatus(0);
//     });
//   },

//   // 初始加载聊天信息
//   init: function () {
//     var me = this;
//     me.getData(function (data) {
//       if (data.length) {
//         var msgs = data.map(function (d) {
//           return me.getItem(d)
//         });
//         me.$box.html(msgs);
//         me.scrollToBottom();
//       } else {
//         me.setStatus(3);
//       }
//       me.bindScroll();
//     });
//   },

//   // 绑定滚动事件
//   bindScroll: function () {
//     var me = this;
//     me.$box.scroll(function () {
//       if (me.lock) return;
//       if (me.status) return;
//       if (me.scrollTop <= 70) {
//         me.getData(function (data) {
//           me.prepend(data);
//         });
//       }
//     });
//   },

//   // 解绑滚动事件
//   unbindScroll: function () {
//     this.$box.off('scroll');
//   },

//   // 重新加载
//   reload: function () {
//     this.unbindScroll();
//     this.page = 1;
//     this.setStatus(0);
//     this.init();
//   },

//   // 更新聊天记录中某个用户的所有头像的等级和头衔
//   // updateLV: function (id, lv) {
//   //   this.$box.find('[data-uid="' + id + '"]').each(function () {
//   //     var p = this.parentNode;
//   //     p.className = p.className.replace(/lv\d/, 'lv' + lv);
//   //     $(p).siblings().filter(rs('.lvmsg')).html(common.lvMsgs[lv]);
//   //   });
//   // },
// });
